<template>
    <div class="access_rule_container">
        <vxe-table-template :data="dataList" :options.sync="tableOptions"
                            @event="handleTableEvent" />

        <component-dialog dialog-drag :options="componentDialogOption" />
    </div>
</template>

<script>
import AccessRuleForm from "../dialog/data-access/AccessRuleForm";

export default {
    name: "rule",
    props: {
        active: Object,
    },
    data() {
        const _this = this;
        return {
            dataList: [],
            tableOptions: {
                ref: 'accessRuleTable',
                container: '.access_rule_container',
                columns: [
                    {
                        label: '编码',
                        prop: 'name',
                        align: 'center',
                    },
                    {
                        label: '名称',
                        prop: 'code',
                        align: 'center',
                    },
                    {
                        label: 'sql语句',
                        prop: 'sql_where',
                        align: 'center',
                    },
                    {
                        label: '启用状态',
                        prop: 'dr',
                        align: 'center',
                        render(h, { row, column }) {
                            return h("el-switch", {
                                props: {
                                    value: row[column.prop] === 0,
                                },
                                on: {
                                    change(value) {
                                        _this.$set(row, column.prop, value === true ? 0 : 1);
                                        _this.saveRow(row);
                                    },
                                },
                            });
                        },
                    },
                    {
                        label: '创建时间',
                        prop: 'create_date',
                        align: 'center',
                    }
                ],
                operates: {
                    fixed: 'right',
                    list: [
                        {
                            id: 'edit',
                            type: 'success',
                            icon: 'fa fa-pencil',
                            size: 'mini',
                            show: true,
                            tooltip: {
                                content: "编辑",
                            },
                            method: (index, row) => {
                                _this.openDialog(row, 'edit');
                            }
                        },
                    ],
                },
                pagination: {
                    pageIndex: 1
                }
            },
        };
    },
    watch: {
        active: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            const _this = this;
            if (!_this.active || !_this.$utils.isNotEmpty(_this.active.sid)) {
                return;
            }
            _this.getList(true);
        },
        getList(init, search = {}) {
            const _this = this;
            _this.dataList = [];
            if (init) {
                _this.tableOptions = _this.resetTablePagination(_this.tableOptions);
            }
            let queryData = _this.getQueryParams(_this.tableOptions, search);
            queryData.obj_sid = _this.active.sid;
            _this.fetchData(_this.$api.API_FindSysDataObjAccessRules, queryData).then(result => {
                _this.dataList = result.data || [];
                _this.tableOptions = _this.setTableTotal(_this.tableOptions, result);
            }).catch(() => {
            });
        },
        handleTableEvent(event) {
            if (event.type === 'page') {
                this.getList();
            }
        },
        saveRow(row) {
            const _this = this;
            let subData = Object.assign({}, row);
            _this.fetchData(_this.$api.API_SaveSysDataObjAccessRule, subData).then(() => {
                _this.$message.success('保存成功！');
            }).catch(() => {
            });
        },
        openDialog(row, type) {
            const _this = this;
            if (!_this.active) {
                _this.$message.warning("请选择数据对象！")
                return;
            }
            let title = '编辑数据对象规则';
            if (type === "add") {
                title = '新增数据对象规则';
                row = {
                    obj_sid: _this.active.sid,
                };
            }
            _this.openComponentDialog({
                width: '640px',
                title,
                component: AccessRuleForm,
                propsData: {
                    row,
                },
                callback() {
                    _this.getList();
                },
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.access_rule_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
